<template>
    <div>
        <!--章节添加-->
        {{form}}
        <van-field label='章节' placeholder="请输入章节" v-model="form.name"></van-field>
        <van-field label='章节数' placeholder="请输入章节数" v-model="form.sort"></van-field>
        课程目录
        <select name="" id="" v-model="form.course_id">
            <option :value="i.id" v-for="i in coulist">{{i.title}}</option>
        </select>
        <br>
        添加视频
        <van-uploader :after-read="upload" />
        <br>
        <video :src="'http://localhost:5000'+form.video_url" controls="controls" width="200px" height="200px" />
        <br>
        <van-button @click="add">提交</van-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                coulist:[],
                form:{video_url:''},
            
            }
        },
        methods: {
            upload(file){
                if(this.form.course_id){
                    let formdata = new FormData
                    formdata.append('file',file.file)
                    formdata.append('course_id',this.form.course_id)
                    this.$axios.post('/course/jieadd/',formdata).then(res=>{
                        this.form.video_url = res.data.url
                        
                    })
                }else{
                    alert('请先选择课程')
                }
                

            },
            //获取课程
            getcourse(){
                this.$axios.get('/course/jieadd/').then(res=>{
                    this.coulist = res.data.list
                })
            },
            //添加到数据库
            add(){
                this.$axios.post("/course/courserpage/",this.form).then(res=>{

                })
            }

        },
        mounted() {
            this.getcourse()
        },
    }
</script>

<style scoped>

</style>